<template>
    <div>
      <!-- <bannerSlide :banner="banner"></bannerSlide> -->
      <CarouselComponent :bannerList="banner" :height="'360px'"></CarouselComponent>
      <div>
        <div class="container main">
          <div>
            <div class="row">
              <div class="col-md-12">
                <div class="element-tabs">
                  <el-tabs v-model="activeName" @tab-click="handleClick" >
                    <el-tab-pane label="全部" name="Home" ></el-tab-pane>
                    <el-tab-pane label="路演活动" name="second"></el-tab-pane>
                    <el-tab-pane label="培训内容" name="third"></el-tab-pane>
                    <el-tab-pane label="人才俱乐部" name="fourth"></el-tab-pane>
                    <el-tab-pane label="活动合作" name="ActiveCooperation"></el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
            <component v-bind:is="currentTabComponent"></component>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import bannerSlide from '../../../views/polityPage/bannerSlide.vue';
  import Home from './Home';
  import ActiveCooperation from './ActiveCooperation';
  import CarouselComponent from '../../../views/localPage/CarouselComponent.vue';

    export default {
        name: "ActiveService",
        components:{bannerSlide,Home,ActiveCooperation,CarouselComponent},
      data(){
          return{
            activeName: 'Home',
            banner:['../../../static/images/banner_polityService.png','../../../static/images/banner_polityService.png','../../../static/images/banner_polityService.png',],//传给轮播组件的图片路径,
            currentTabComponent:'Home'
          }
      },
      methods: {
        handleClick(tab, event) {
          this.currentTabComponent=tab.name
          console.log(tab.name, event);
        }
      }
    }
</script>

<style scoped>
  .element-tabs{
    margin-top: 80px;
  }
  .element-tabs .el-tabs__item{
    font-size: 24px;
  }
</style>
